<!DOCTYPE html>
<html ng-app=authapp>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>江苏省师范类专业认证系统管理主页</title>
    <meta name="keywords" content="江苏省师范类专业认证系统管理主页">
    <meta name="description" content="江苏省教育评估院,师范类专业,认证系统,管理主页">
    <script src="../../plugin/jquery/jquery-2.1.1.min.js"></script>
    <script src="../../plugin/jquery/FileSaver.js"></script>
    <script src="../../plugin/htmlcanvas/htmlcanvas.js"></script>
    <script src="../../plugin/htmlcanvas/jspdf.js"></script>
    <script src="../../plugin/htmlcanvas/addimage.js"></script>


    <style>
.table-container{
    width:800px;
    margin:0 auto;
}
        table
{
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
table td, table th
{
    border: 1px solid #cad9ea;
    color: #666;

}
table thead th
{
    background-color: #CCE8EB;

}
table tr:nth-child(odd)
{
    background: #fff;
}
table tr:nth-child(even)
{
    background: #F5FAFA;

        }
        .btn{
            width:100px;
            height:35px;
            background-color: #5bc0de;
            border-radius: 3px;
            color:white;
            position: absolute;
            text-align: center;
            line-height: 35px;
            top:0;left:0;
            cursor: pointer;
        }
        #canvas{
            display: none;
        }
    </style>
</head>

<body>
<div >
    <div class="btn">导出</div>
    <div class="table-container"></div>

</div>



</body>
<script>
    function UrlSearch()
    {
        var name,value;
        var str=location.href; //取得整个地址栏
        var num=str.indexOf("?")
        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

        var arr=str.split("&"); //各个参数放到数组里
        for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                name=arr[i].substring(0,num);
                value=arr[i].substr(num+1);
                this[name]=value;
            }
        }
    }
    var Request=new UrlSearch(); //实例化
    $.ajax({
        url:'/zzpg/count/queryScoreByYear',
        type:'POST',
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        },
        data:JSON.stringify({expectType:Request.expectType}),
        success:function(res){
            console.log(res)
            var html = ''
            html+='<table class="table"><tr style="width:200px"><td>学校名称</td><td>评审结果</td><td style="width:500px">评审细节</td></tr>';
            res.data.forEach(function(target){
                html+='<tr><td>'
                html+=target.schoolName;
                html+='</td>'
                html+='<td>'
                html+=target.allScore;
                html+='</td>'
                html+='<td>'
                html+=target.opinionB.length+'个B<br>';
                html+=target.opinionB.join(',');
                html+='<br>'
                html+=target.opinionC.length+'个C<br>';
                html+=target.opinionC.join(',');
                html+='<br>'
                html+='</td></tr>'
            })
            html+='</table>'
            $('.table-container').html(html)

        },
        error:function(err){
            console.log(err)
        }
    })
    $(function(){
        $('.btn').on('click',function(){

            html2canvas(document.querySelector(".table")).then(canvas => {
                var imgData = canvas.toDataURL('image/jpeg');
                // var doc = new jsPDF("p", "mm", "a4");
                downloadIamge(imgData,'汇总')
                // doc.addImage(imgData, 'JPEG', 0, 0,210,297);
                // doc.save('汇总' + ".pdf");
            });
            alert('正在导出中，请稍等，关闭提示开始处理')
        })
    })
    function downloadIamge(imgsrc, name) {//下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
    }
</script>
</html>
